<template>
  <div class="fenzi">
    <!-- 顶部进出栏 -->
    <van-nav-bar
      title="不 凡"
      fixed
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
    />
    <!-- 横向导航栏 -->
    <van-tabs class="list" v-model="active" @click="itemEvents">
      <van-tab
        v-for="item in list"
        :name="item.name"
        :key="item.id"
        :title="item.name"
      ></van-tab>
    </van-tabs>
    <!-- 简述 -->
    <div class="bsyyds">
      <h2>{{ hsyyds.name }}</h2>
      <p>{{ hsyyds.front_desc }}</p>
    </div>
    <!-- 商品展示 -->
    <div class="hyyyds">
      <ul>
        <li
          @click="$router.push(`/goumai?id=${item.id}`)"
          v-for="item in xfqyyds"
          :key="item.id"
        >
          <img :src="item.list_pic_url" alt="" />
          <h2>{{ item.name }}</h2>
          <p>￥{{ item.retail_price }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { categoryNav, goodsList } from "@/api/分类/fen.js";
export default {
  name: "Fenzi",
  data() {
    return {
      // 针对 index的值地
      active: 0,
      // 针对名字的
      // active: "",
      list: [],
      xfqyyds: [],
      hsyyds: {},
    };
  },
  methods: {
    itemEvents(name, title) {
      //  name,title这两个参数是 Vant 组件 标签页那个功能自带的参数
      var time = this.list.find((ele) => ele.name == name);
      // 商品展示
      goodsList({
        params: {
          categoryId: time.id,
        },
      }).then((res) => {
        // console.log(res);
        this.xfqyyds = res.data.data;
        this.hsyyds = res.data.currentNav;
      });
    },
  },
  created() {
    // console.log(this.$route.query.id);
    // console.log(this.$route.query.index);
    // // 第一种方法：通过下表来传值  点击进来的时候带参数 index
    this.active = Number(this.$route.query.index);
    categoryNav({
      params: {
        id: this.$route.query.id,
      },
    }).then((res) => {
      // console.log(res);
      this.list = res.data.navData;
      this.active = res.data.currentNav.name;
    });
    // 商品展示
    goodsList({
      params: {
        categoryId: this.$route.query.id,
      },
    }).then((res) => {
      // console.log(res);
      this.xfqyyds = res.data.data;
      this.hsyyds = res.data.currentNav;
    });
  },
};
</script>

<style lang="less" scoped>
.fenzi {
  .list {
    margin-top: 51px;
  }
  .bsyyds {
    margin: 5px 0;
    width: 100%;
    height: 90px;
    box-sizing: border-box;
    padding: 20px 0;
    text-align: center;
    background-color: rgb(252, 252, 252);
    h2 {
      font-weight: 400;
    }
    p {
      margin-top: 5px;
      color: rgb(100, 97, 97);
    }
  }
  .hyyyds {
    ul {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      background-color: #fff;
      li {
        width: 49%;
        height: 230px;
        margin-bottom: 5px;
        text-align: center;
        img {
          width: 100%;
          height: 70%;
        }
        h2 {
          font-size: 12px;
          font-weight: 400;
          margin: 8px 0;
        }
        p {
          color: red;
          font-size: 12px;
          margin: 5px 0;
        }
      }
    }
  }
}
</style>